<template>
    <div>
        <el-card>
            <Category />
        </el-card>
        <el-card style="margin:10px 0;">
            <div v-show="scene == 0">
                <el-button type="primary" icon="Plus" :disabled="state.category.c3Id ? false : true"
                    @click="addSpu">增加SPU</el-button>
                <el-table border style="margin:20px 0;" :data="records">
                    <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
                    <el-table-column label="SPU名称" align="center" prop="spuName"></el-table-column>
                    <el-table-column label="SPU描述" align="center" prop="description"> </el-table-column>
                    <el-table-column label="SPU操作" align="center">
                        <template #="{ row, $index }">
                            <el-button type="primary" size="small" icon="Plus" title="增加SKU"
                                @click="addSKU(row)"></el-button>
                            <el-button type="primary" size="small" icon="Edit" title="修改SKU"
                                @click="updateSPU(row)"></el-button>
                            <el-button type="primary" size="small" icon="View" title="查看SKU"
                                @click="findSku(row)"></el-button>
                            <el-popconfirm :title="`确定要删除${row.spuName}吗?`" icon="DeleteFilled" icon-color="#f56c6c"
                                @confirm="clicktapdelete(row)">
                                <template #reference>
                                    <el-button type="danger" size="small" icon="Delete" />
                                </template>
                            </el-popconfirm>
                            <!-- <el-button type="primary" size="small" icon="Delete" title="删除SKU"></el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination v-model:current-page="pageNo" v-model:page-size="limit" :page-sizes="[3, 5, 7, 9]"
                    @current-change="getHassSpu" @size-change="changesize" :background="true"
                    layout="prev, pager,next, jumper,->, sizes,total,  " :total="total" />
            </div>
            <SpuForm ref="Spuformdata" v-show="scene == 1" @changeScene="changeScene" />
            <SkuForm ref="skuFormRef" v-show="scene == 2" @changeScenesku="changeScenesku" />
            <el-dialog title="SKU列表" v-model="showsku">
                <el-table border :data="skuList">
                    <el-table-column label="SKU名称" align="center" prop="skuName">
                    </el-table-column>
                    <el-table-column label="SKU价格" align="center" prop="price">
                    </el-table-column>
                    <el-table-column label="SKU重量" align="center" prop="weight">
                    </el-table-column>
                    <el-table-column label="SKU图片" align="center">
                        <template #="{ row, $index }">
                            <img :src="row.skuDefaultImg" alt="" style="height: 100px; width: 100px;">
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
        </el-card>
    </div>
</template>
<script setup>
import { getHasSpuListAPI, getfindBySpuId, deleteSpu } from '@/api/product/spu/index.js'
import { ref, watch, reactive, onMounted } from 'vue'
import { useStore } from 'vuex';
import SkuForm from './skuForm.vue'
import SpuForm from './spuForm.vue'
let { state } = useStore()
let limit = ref(3)
let pageNo = ref(1)
let total = ref(0)
let records = ref([])
let scene = ref(0)
// 获取子组件数据
let Spuformdata = ref(null)
let skuFormRef = ref()
let showsku = ref(false)
let skuList = ref([])
const getHassSpu = (pager = 1) => {
    pageNo.value = pager
    getHasSpuListAPI(pageNo.value, limit.value, state.category.c3Id).then(res => {
        console.log(res);
        if (res.code == 200) {
            records.value = res.data.records
            total.value = res.data.total
        }
    })
}
const changesize = () => {
    console.log(212);
    getHassSpu()
}
watch(() => state.category.c3Id, () => {
    getHassSpu()
})
const changeScene = (obj) => {
    console.log(obj);
    // scene.value = obj.flag
    scene.value = Object.assign(obj).flag
    console.log(scene.value);
    if (obj.state === 'update') {
        // 更新留在当前页
        getHassSpu(pageNo.value)
    } else {
        // 添加回到第一页
        getHassSpu()
    }
}
const changeScenesku = (obj) => {
    console.log(obj);
    // scene.value = obj.flag
    scene.value = Object.assign(obj).flag
    console.log(scene.value);
    if (obj.state === 'update') {
        // 更新留在当前页
        getHassSpu(pageNo.value)
    } else {
        // 添加回到第一页
        getHassSpu()
    }
}
// 查看
const findSku = async (row) => {
    showsku.value = true
    console.log(row);
    getfindBySpuId(row.id).then(res => {
        console.log(res);
        if (res.code == 200) {
            skuList.value = res.data
        }
    })
}
// 删除
const clicktapdelete = (row) => {
    deleteSpu(row.id).then(res => {
        if (res.code == 200) {
            ElMessage.success(res.message)
            getHassSpu(pageNo.value)
        } else {
            ElMessage.error(res.message)
        }
    })
}
const addSKU = (row) => {
    console.log(row);
    scene.value = 2
    // console.log(state.category.c1Id,state.category.c2Id,state.category.c3Id);
    // let objid = {
    //     c1Id:state.category.c1Id,
    //     c2Id:state.category.c2Id,
    //     c3Id:state.category.c3Id
    // }
    // sku.value.initSkuData(row)
    skuFormRef.value.initSkuData(state.category.c1Id, state.category.c2Id, state.category.c3Id, row)
}
const updateSPU = (row) => {
    scene.value = 1
    Spuformdata.value.initHasSpuData(row)
}
// 场景0添加SPU按钮
const addSpu = () => {
    scene.value = 1
    Spuformdata.value.initAddSpu(state.category.c3Id)
}
</script>